"use client"
import styles from "./index.module.scss"
import React , { useState } from "react" ;
import SelectCity from "@/components/selectCity";
import Modal from 'react-modal';
import {defaultLocal } from "@/constant/index"
import {queryTypeByTarget} from "@/utils/index"
import { useStore, TabType } from "@/store/tabs"



interface SearchProps{
  className?:  string
  getQueryParams: (params: any) => void
}
interface Local{
  pro:{ //省
    code: string
    name: string
  }
  city?: { // 市
    code: string
    name: string
  }
  county?: { // 区
    code: string
    name: string
  }
}
const Search: React.FC<SearchProps> = ({className = '', getQueryParams}) => {
  const [local, setLocal] = useState<Local>(defaultLocal);
  const [modalIsOpen, setIsOpen] = React.useState(false);
  function openModal() {
    setIsOpen(true);
  }
  function closeModal() {
    setIsOpen(false);
  }
  const customStyles = {
    content: {
      top: '0',
      left: '0',
      right: '0',
      bottom: '0',
      // marginRight: '-50%',
      // transform: 'translate(-50%, -50%)',
      background:'rgba(0,0,0,.5)'
    },
  };

  const onOk = (data:any) => {
    setLocal(data)
    setInfo(data)
    // dispatch({
    //   type:"map",
    //   data
    // })
    data['province'] = data['pro'];
    let newData = JSON.parse(JSON.stringify(data));
    newData['province'] = data['pro'];
    delete newData['pro']
    serSearchProps({
      ...searchProps,
      map: newData
    })
  }

  const getLocal = (local: Local) => {
    // if(Object.keys(local).length === 0){
    //   return "全国"
    // }
     const addres : Array<"county" | "city" | "pro">= ["county", "city", "pro"];
     for(let i = 0; i < addres.length; i++){
      const item : "county" | "city" | "pro"= addres[i];
      if(queryTypeByTarget(local) === "object"){
        if(local?.county && local.county?.name){
          return local.county.name
        }
        if(local?.city && local.city?.name){
          return local.city.name
        }
        if(local?.pro && local.pro?.name){
          return local.pro.name
        }
      }
     }
  }
  interface Item {
    code: string
    name: string
  }
  interface ifnoProps {
    pro: Item,
    city?: Item,
    county?: Item
  }


  const [searchProps, serSearchProps] = useState<{search: string, des: 'all' | 'startLocation' | 'endLocation', map: any}>({search:'', des:'all', map: {pro: {code: '00', name: '全国'},city:{}, county:{}}});
  const [info, setInfo] = useState<ifnoProps>(defaultLocal)
  // const { state, dispatch } = useStore() as any;
  const onChangeSite = async (e: any) => {
    console.log(e.target.value)
    const v = e.target.value
    // dispatch({type: v})
    serSearchProps({
      ...searchProps,
      des: v
    })
  }

  const onChangeSearch = (e: any) => {
    serSearchProps({
      ...searchProps,
      search:e?.target?.value
    })
  }

  const onSearch = () => {
    console.log("onSearch", searchProps)
    getQueryParams(searchProps)
  }
  return(<div className={`${className} ${styles['search-component']}`}>
     <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        style={customStyles}
        // appElement={document.querySelector('body')}
      >
        <SelectCity onClose={closeModal} onOk={onOk} data={info}/>
      </Modal>
    <div className={`${styles['search-layout']}`}>
      <div className={`${styles["map"]}`}>
        <div className={`${styles["select"]}`}>
        <select name="select" onChange={onChangeSite}>
          <option value="all">全部</option>
          <option value="startLocation">出发地</option>
          <option value="endLocation">目的地</option>
        </select>
        </div>
        <div className={`${styles["site"]}`}>
          <i className={`fa fa-map ${styles['size']}`}></i>
          <span className={`${styles['city']}`} onClick={openModal} >{getLocal(local)}</span>
        </div>
      </div>
      <div className={`${styles["search"]}`}>
        <input className={`${styles['searchInput']}`} placeholder="请输入出发城市或者目的地" onChange={onChangeSearch}/>
        <i className={`fa fa-search ${styles["searchIcon"]}`} onClick={onSearch}></i>
      </div>
    </div>
  </div>)
}


export default Search;